<template>
	<div class="left-box">
		<div class="heade-wrapper">
			<a-input-search
				class="last-input-box"
				:placeholder="this.$i18n('selectPeople.input',this.$i18n('org.orgTeam.label'))"
				v-model.trim="searchValue"
				@search="searchHandle"
			>
			</a-input-search>
		</div>
		<top-bottom-layout class="content-wrapper">
			<template #top>
				<scroll-list
					panel="OrgTeam"
					command="teamList"
					ref="teamList"
					:showCheckbox="true"
					:initSearchValue="teamSearchCondition"
					:singleAndMult="true"
					:checkAllShow="false"
					iconType="cap-icon-alternative-group"
					:otherProps="['teamTypeName']"
					@toCheckValueClickProp="getTeamValueClickPropHandle"
				/>
			</template>
			<template #middle></template>
			<template #bottom>
				<scroll-list
					panel="OrgTeam"
					command="unitList"
					ref="peopleList"
					:listDataHandler="listDataHandler"
					:firstLoadSearch="peopleFirstLoad"
				/>
			</template>
		</top-bottom-layout>
	</div>
</template>

<script>
import accountSelector from '@/components/accountSelector';
import scrollList from '@/components/scrollList';
import topBottomLayout from '@/components/topBottomLayout';
import { EntityTypes } from '@/utils/orgConstants';
import { entityFormat, getSelectKey } from '@/utils/utils';

export default {
	name: 'OrgTeam',
	components: { accountSelector, scrollList, topBottomLayout },
	inject: ['app'],
	data() {
		return {
			searchValue: '',
			selectAccountId: '',
			teamId: '',
			peopleFirstLoad: false,
			teamSearchCondition: {},
			upShow: true,
			downShow: true,
			teamOtherProps: ['typeName'],
			teamTitleProps: { typeName: this.$i18n('edoc.form.sort') }
		};
	},
	computed: {
		accountTreeDisabled() {
			return this.app().orgSelect.disabledAccountSelectorForOrgTeam || false;
		},
		orgSelect() {
			return this.app().orgSelect;
		}
	},
	beforeMount() {
		this.selectAccountId = this.app().orgSelect.defaultAccountId;
		this.teamSearchCondition = {
			accountId: this.app().orgSelect.defaultAccountId
		};
	},
	methods: {
		initProps() {
			this.searchValue = '';
			this.teamId = '';
			this.peopleFirstLoad = false;
		},
		listDataHandler(data) {
			const orgSelect = this.orgSelect;
			const loginAccountId = orgSelect.loginAccountId;
			// 组织属性需要单独格式化
			return data.map((item) => {
				const { type, name, accountShortName, postName, deptName, sourcePosts, accountId } = item;
				item.$_selectKey = getSelectKey(item);
				item.$_showLabel = entityFormat(item, loginAccountId, orgSelect).name;
				return item;
			});
		},
		onChangeAccount(ret) {
			console.log(ret, 'Ret');
			this.initProps();
			this.$refs.peopleList.initProps(); // 人员清空
			this.selectAccountId = ret.id;
			this.searchHandle();
		},
		searchHandle() {
			this.$refs.teamList.search({
				accountId: this.selectAccountId,
				keyword: this.searchValue
			});
		},
		getTeamValueClickPropHandle(value) {
			this.teamId = value.id;
			this.peopleSearchHandle();
		},
		peopleSearchHandle() {
			this.peopleFirstLoad = true;
			this.$refs.peopleList.search({
				teamId: this.teamId
			});
		}
	},
	mounted() {
		this.$root.$on('AddEdocOrgTeam',this.searchHandle);
	},
	beforeDestroy() {
		this.$root.$off('AddEdocOrgTeam',this.searchHandle);
	}
};
</script>

<style lang="scss" scoped>
</style>
